/// 页面 * 表单
<script setup lang="tsx">
import { Input, InputNumber, Select, Textarea } from 'ant-design-vue'
import { ExForm, rule } from '@expresso/plus'
import { btnCSS } from './styles'
import { Page } from '@/components'

type ModelType = {
  username: string
  password: string
  age: number
  status: number
  statusName: string
  statusCode: string
  statusNum: number
  remarks: string
}

const form = useForm<ModelType>({
  model: { status: 1 },
})

defineRender(
  <Page>
    <div class="my-form">
      <ExForm {...form.bind}>
        {/* 用户名 */}
        <ExForm.Item label="用户名" name="username" rule={rule().len(10)}>
          <Input />
        </ExForm.Item>
        {/* 年龄 */}
        <ExForm.Item label="年龄" name="age" rule={rule().limit(99)}>
          <InputNumber />
        </ExForm.Item>
        {/* 状态 */}
        <ExForm.Item
          label="状态"
          name="status,statusName"
          fields="statusCode, statusNum:statusNumber"
        >
          <Select
            options={[
              {
                value: 1,
                label: '启用',
                source: {
                  statusCode: '0000',
                  statusNumber: 110,
                },
              },
              {
                value: 2,
                label: '禁用',
                source: {
                  statusCode: '1000',
                  statusNumber: 111,
                },
              },
            ]}
            onChange={(value) => {
              console.log(value)
            }}
          />
        </ExForm.Item>

        <ExForm.Item label="备注" name="remarks" v-css="">
          <Textarea show-count maxlength={100} />
        </ExForm.Item>
      </ExForm>
    </div>
    {JSON.stringify(form.getData())}
    <br />
    <button
      v-css={btnCSS}
      onClick={async () => {
        console.log(form.getData())
        try {
          await form.api?.validateFields()
        } catch (err) {
          console.log(err)
        }
      }}
    >
      validate
    </button>
  </Page>,
)
</script>

<script lang="tsx"></script>

<style scoped lang="scss">
.my-form {
  width: 600px;
  margin: 16px;
}
</style>
